<template>
    <div class="_pre-play" :style="{ backgroundImage: `url(${coverUrl})`, backgroundSize: 'cover' }">
        <div class="_pre-play__inner">
            <div class="_pre-play__title">{{ name }}</div>
            <div class="_pre-play__time">
                <span>
                    <strong>{{ mix_countdownDays }}</strong>
                    天
                </span>
                <span>
                    <strong>{{ mix_countdownHours }}</strong>
                    时
                </span>
                <span>
                    <strong>{{ mix_countdownMinutes }}</strong>
                    分
                </span>
                <span>
                    <strong>{{ mix_countdownSeconds }}</strong>
                    秒
                </span>
                后开始
            </div>
        </div>
    </div>
</template>

<script>
import countdown from '@/mixins/countdown';
import liveInfo from '@/mixins/liveInfo';
import streamInfo from '@/mixins/streamInfo';
import liveSetting from '@/mixins/liveSetting';

export default {
    props: {
        coverUrl: String,
    },
    mixins: [liveInfo, liveSetting, streamInfo, countdown,],
    computed: {
        /**
         * 标题
         */
        name() {
            return this.mix_liveInfo?.name;
        },
        /**
         * 直播开始时间
         */
        startTime() {
            return this.mix_liveInfo?.startTime;
        },
    },
    mounted() {
        // ios 不支持 ’-‘ 连接的时间格式
        const startTime = (this.mix_liveInfo.startTime || '').replace(/-/g, '/');
        this.mix_timeUpdate(+new Date(startTime));
    },
};
</script>

<style lang="scss" scoped>
._pre-play {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: no-repeat 50% / cover;

    // z-index: 1;
    &::before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: -4px;
        content: '';
        background: inherit;
        filter: blur(4px);
    }

    &::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        content: '';
        background: rgba(0, 0, 0, 0.65);
    }

    &__inner {
        position: absolute;
        top: 116px;
        left: 50%;
        z-index: 1;
        color: #fff;
        text-align: center;
        transform: translateX(-50%);
    }

    &__title {
        font-size: 18px;
        white-space: nowrap;
    }

    &__time {
        margin-top: 20px;
        font-size: 14px;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.6);
        white-space: nowrap;

        strong {
            margin: 0 4px;
            font-family: monospace;
            font-size: 20px;
            font-weight: 700;
            color: #fff;
        }
    }

    &__action {
        margin-top: 20px;

        .van-button {
            width: 124px;
            height: 41px;
        }
    }
}

._pre-play__action-reminded {
    .van-button {
        color: #ccc;
        cursor: unset;
    }
}
</style>